<template>
	
	<el-row>
		<el-col :span="4" :offset="4">
			
			<el-select v-if="this.receivedClass=='agency'" 
			v-model="receivedIdValue" filterable 
			class="m-2" placeholder="请选择部门..." 
			size="large" @change="switchChatDpId">
				<el-option
				v-for="item in receivedObjects"
				:key="item"
				:label="item.dpName"
				:value="item.dpId"
				/>
			</el-select>
			<el-select v-if="this.receivedClass=='person'"
				v-model="receivedIdValue" filterable class="m-2" 
				placeholder="请选择员工..." size="large" 
				@change="switchChatEId">
				<el-option
				v-for="item in receivedObjects"
				:key="item"
				:label="item.ename"
				:value="item.eid"
				/>
			</el-select>
		</el-col>
		
	</el-row>
	<br />
	<el-row>
		<el-col :span="16" :offset="4">
			<el-tabs type="border-card" v-model="tabValue" @tab-click="switchChatClass">
				<el-tab-pane label="部门交流" name="agency"/>
				<el-tab-pane label="个人交流" name="person"/>
				<el-row >
					
					<el-col :span="16" :offset="1" v-if="this.receivedClass=='agency'">
						<el-row>
							<el-col :span="24" class="chatBox agency">
								<el-row v-for="messages in receivedMessages" :key="messages" >
									<el-col :span="24">
										<el-row>
											<el-col :span="3">发送人名称：</el-col>
											<el-col :span="4">{{receivedEmployee.ename}}</el-col>
											<el-col :span="3" :offset="2">时间：</el-col>
											<el-col :span="8">{{dateFormat(messages.smTime)}}</el-col>
											<el-divider />
											<el-col :span="24">{{messages.smContent}}</el-col>
										</el-row>
										<br />
									</el-col>
								</el-row>
							</el-col>
							<el-col :span="24">
								<el-row>
									<el-col :span="24">
									<el-input
										v-model="addShortmessage"
										:rows="5"
										type="textarea"
										placeholder="Please input"
										style="height:125px;overflow-y:scroll;"
										resize="none"
									/>
									</el-col>
									
									<el-col :span="4">
										<el-select v-model="stateValue" @change="switchState" class="m-2" placeholder="状态" size="default">
											<el-option
											v-for="item in personstates"
											:key="item"
											:label="item.psContent"
											:value="item.psId"
											/>
										</el-select>
									</el-col>
										<el-col :span="4" :offset="16">
											<el-button type="primary">发送</el-button>
										</el-col>
								</el-row>
							</el-col>
						</el-row>
					</el-col>
					<el-col :span="16" :offset="1" v-if="this.receivedClass=='person'">
						<el-row>
							<el-col :span="24" class="chatBox person">
								<el-row v-for="messages in receivedMessages" :key="messages" >
									<el-col :span="24">
										<el-row>
											<el-col :span="3">发送人名称：</el-col>
											<el-col :span="4">{{receivedEmployee.ename}}</el-col>
											<el-col :span="3" :offset="2">时间：</el-col>
											<el-col :span="8">{{dateFormat(messages.smTime)}}</el-col>
											<el-divider />
											<el-col :span="24">{{messages.smContent}}</el-col>
										</el-row>
										<br />
									</el-col>
								</el-row>
							</el-col>
											<el-divider />
							<el-col :span="24" class="chatBox person">
								<el-row v-for="messages in sentMessages" :key="messages" >
									<el-col :span="24">
										<el-row>
											<el-col :span="3">接收人名称：</el-col>
											<el-col :span="4">{{receivedEmployee.ename}}</el-col>
											<el-col :span="3" :offset="2">时间：</el-col>
											<el-col :span="8">{{dateFormat(messages.smTime)}}</el-col>
											<el-divider />
											<el-col :span="24">{{messages.smContent}}</el-col>
										</el-row>
										<br />
									</el-col>
								</el-row>
							</el-col>
							<el-col :span="24">
							
								<el-row>
									<el-col :span="24">
									<el-input
										v-model="addShortmessage"
										:rows="5"
										type="textarea"
										placeholder="Please input"
										style="height:125px;overflow-y:scroll;"
										resize="none"
									/>
									</el-col>
									
									<el-col :span="4">
										<el-select v-model="stateValue" @change="switchState" class="m-2" placeholder="状态" size="default">
											<el-option
											v-for="item in personstates"
											:key="item"
											:label="item.psContent"
											:value="item.psId"
											/>
										</el-select>
									</el-col>
										<el-col :span="4" :offset="16">
											<el-button type="primary" @click="saveInsert">发送</el-button>
										</el-col>
								</el-row>
							</el-col>
						</el-row>
					
					</el-col>
					<el-col :span="6" :offset="1">
						<el-table :data="allEmployeeState" style="width: 100%;height:450px;overflow-y:scroll">
							<el-table-column prop="person" label="人员" />
							<el-table-column prop="state" label="状态" />
						</el-table>
					</el-col>
				</el-row>
			</el-tabs>
		
		</el-col>
	</el-row>

</template>

<script>

import {ElMessage} from 'element-plus'
import qs from 'qs'
import { ref } from 'vue'
export default {
	data () {
		return {
			tabValue:"person",
			receivedMessages:[],
			sentMessages:[],
			addShortmessage:"",
			employees:[],
			employeesInDp:[],
			departments:[],
			personstates:[],
			allEmployeeState:[],
			
			receivedClass:"",
			receivedObjects:[],
			receivedIds:[],
			receivedEmployee:{},
			receivedIdValue : ref(''),
			textarea : ref(''),
			stateValue: ref(''),
		}
	},
	methods:{
		employeeList(){
			this.allEmployeeState = []
			for(let i = 0 ;i < this.employees.length;i++){
				for(let j = 0;j < this.personstates.length;j++){
					console.log(this.employees[i].psId+":"+this.personstates[j].psId)
					if(this.employees[i].psId==this.personstates[j].psId){
						
						this.allEmployeeState.push({
							person:this.employees[i].ename,
							state:this.personstates[j].psContent
						})
					}
				}
			}
			console.log(this.allEmployeeState)
		},
		employeesInDpList(){
			this.allEmployeeState = []
			for(let i = 0 ;i < this.employeesInDp.length;i++){
				for(let j = 0;j < this.personstates.length;j++){
					console.log(this.employeesInDp[i].psId+":"+this.personstates[j].psId)
					if(this.employeesInDp[i].psId==this.personstates[j].psId){
						
						this.allEmployeeState.push({
							person:this.employeesInDp[i].ename,
							state:this.personstates[j].psContent
						})
					}
				}
			}
			console.log(this.allEmployeeState)
		},
		dateFormat(time) {
			var date=new Date(time);
			var year=date.getFullYear();
			/* 在日期格式中，月份是从0开始的，因此要加0
			* 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
			* */
			var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
			var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
			var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
			var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
			var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
			// 拼接
			return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
		},
		switchChatClass(tab) {
			
			if(tab.props.name=="agency"){
				this.receivedClass = "agency"
				this.receivedObjects = this.departments
			}
			else{
				this.receivedClass = "person"
				this.receivedObjects = this.employees
			}
			console.log(this.receivedClass)
		},
		switchChatEId(){
			let that = this
			this.$axios.get("http://localhost:8080/E/selectEOneByEId",{
				params:{
					eId:that.receivedIdValue,
				}
			}).then(function(res){
				console.log(res.data)
				that.receivedEmployee = res.data
				that.employeeList()
				
			})
			this.$axios.get("http://localhost:8080/SM/selectSMListByEIdAndRClassAndRId",{
				params:{
					eId:that.$store.state.eId,
					receivedClass:that.receivedClass,
					receivedId:that.receivedIdValue
				}
			}).then(function(res){
				console.log(res.data)
				that.sentMessages = res.data.slice(res.data.length-10>0?res.data.length-10:0,res.data.length)
			})
			this.$axios.get("http://localhost:8080/SM/selectSMListByEIdAndRClassAndRId",{
				params:{
					eId:that.receivedIdValue,
					receivedClass:that.receivedClass,
					receivedId: that.$store.state.eId
				}
			}).then(function(res){
				console.log(res.data)
				that.receivedMessages = res.data.slice(res.data.length-10>0?res.data.length-10:0,res.data.length)
			})
		},
		switchChatDpId(){
			
			let that = this
			console.log(that.receivedIdValue)
			//获取在当前部门中发送了消息的员工
			this.$axios.get("http://localhost:8080/employee/selectebd",{
				params:{
					dpId:that.receivedIdValue,
				}
			}).then(function(res){
				console.log(res.data)
				that.employeesInDp = res.data
				that.employeesInDpList()
			})
			//调出在部门交流状态下，所有人员发送的信息
			this.$axios.get("http://localhost:8080/SM/selectSMListByRClassAndRId",{
				params:{
					receivedClass:that.receivedClass,
					receivedId:that.receivedIdValue
				}
			}).then(function(res){
				console.log(res.data)
				that.sentMessages = res.data.slice(res.data.length-10>0?res.data.length-10:0,res.data.length)
			})
		},
		switchState(){
			let that = this
			that.$store.state.loginEmployee.psId = that.stateValue
			console.log(that.$store.state.loginEmployee)
			let str = qs.stringify(that.$store.state.loginEmployee)
			this.$axios.get("http://localhost:8080/E/updateEOne?"+str,{
				params:{
					employee:str
				}
			}).then(function(res){
					if(res.data==true){
						ElMessage({
							message:"更新成功！",
							type:'success',
						})
						that.employeeList()
					}else{
						ElMessage.error("更新失败！")
					}
			})
		}},
		saveInsert(){
			let shortmessage = []
			shortmessage.smId = 0
			shortmessage.smContent = this.addShortmessage
			shortmessage.smTime = this.dateFormat(new Date())
			shortmessage.smReceivedClass = this.receivedClass
			shortmessage.smReceivedId = this.receivedIdValue
			shortmessage.smFlag = 1
			shortmessage.eId = this.$store.state.eId
			console.log(shortmessage)
			let str = qs.stringify(shortmessage)
			this.$axios.get("http://localhost:8080/SM/insertSMOne?"+str,{
				params:{
					shortmessage:str
				}
			}).then(function(res){
				if(res.data==true){
					ElMessage({
						message:"提交成功！",
						type:'success',
					})
					
				}else{
					ElMessage.error("提交失败！")
				}
			})
	},
	mounted() {
	//显示当前日期时间
		let _this = this// 声明一个变量指向Vue实例this，保证作用域一致
		this.timer = setInterval(() => {
			_this.date = new Date(); // 修改数据date
		}, 1000)
	},
	beforeUnmount() {
		if (this.timer) {
			clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
		}
	},
	created(){
		
		this.receivedClass = "person"
		let that = this
		//初始化登录员工选项
		this.$axios.get("http://localhost:8080/E/selectEOneByEId",{
			params:{
				eId:that.$store.state.eId,
			}
		}).then(function(res){
			console.log(res.data)
			that.$store.state.loginEmployee = res.data
		})
		this.$axios.get("http://localhost:8080/E/selectEList").then(function(res){
			that.employees = res.data
			that.receivedObjects = that.employees
		})
		
		this.$axios.get("http://localhost:8080/dept/selectDeptList").then(function(res){
			that.departments = res.data
			that.receivedObjects = that.departments
		})
		this.$axios.get("http://localhost:8080/PS/selectPSList").then(function(res){
			that.personstates = res.data
			that.employeeList()
		})
	}
}
</script>

<style>
	.chatBox{
		overflow-y: scroll;
	}
	.person{
		height: 150px;
	}
	.agency{
		height: 300px;
	}
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.text {
		font-size: 14px;
	}
	
	.item {
		margin-bottom: 18px;
	}
	
	.box-card {
		width: 200px;
	}
</style>
